<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form layout="vertical" ref="formRef" :model="formState" @finish="handleSubmit">
        <div class="option-column">
          <div class="column-title">设备基础信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="设备名称" name="no">
                <a-input v-model:value="formState.no" placeholder="请输入设备名称" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="设备编号" name="customer_status_id">
                <a-input :disabled="true" v-model:value="formState.customer_status_id" placeholder="请输入设备编号" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="品牌" name="city_id">
                <a-input :disabled="true" v-model:value="formState.city_id" placeholder="请输入品牌" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="设备型号">
                <a-input :disabled="true" v-model:value="formState.name" placeholder="请输设备型号" />

              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="保修状态">
                <a-select v-model:value="formState.date" placeholder="请选择保修状态">
                  <a-select-option v-for="(item, index) in statusOptions" :key="index" :value="item.value">{{ item.text
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="保修截止日期">
                <a-input v-model:value="formState.warranty_status" placeholder="保修截止日期" />
                <!-- <a-date-picker style="width: 100%" v-model:value="formState.warranty_status" placeholder="请选择日期" /> -->
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">资产信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="资产编号">
                <a-input v-model:value="formState.customer_type_id" placeholder="请输入资产编号" />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="使用地点">
                <a-input v-model:value="formState.warranty_end_date" placeholder="请输入使用地点" />
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">关联实验</div>
          <div class="column-content">
            <div class="content-item" v-for="(item1, index) in deviceList" :key="index">
              <a-form-item :label="`关联实验${index + 1}`" >
                <a-select v-model:value="formState.orders" placeholder="请选择关联实验">
                  <a-select-option v-for="(item, index) in classOptions" :key="index" :value="item.value">{{ item.label
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label=" ">
                <a-button type="primary" class="add-btn" @click="handleAdd">
                  <img src="/icons/common/icon-add.png" class="icon" />添加</a-button>
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" htmlType="submit">保存</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import router from "@/routers";
import { ref, computed, onMounted } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import API from "@/api/operation";
import SAPI from "@/api/system";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { getCityId } from "@/utils/city.ts";
const route = useRoute();
//获取当前url参数
const query = computed(() => route.query);
//关联实验

const deviceList = ref([])
const handleAdd = () => {
  deviceList.value.push({
    dealer_id: "",
  })
}

const formState = ref({
  no:'智能摄像头1',
      name:'v2.1',
      customer_type_id:'232323',
      city_id:'良益科技',
      customer_status_id:'324312',
      orders:'测量波长',
      dealer_id:'2022-02-07',
      date:'在保',
      warranty_status:'2026-02-07',
      warranty_end_date:'第七实验室',
      use_place:'正常',
});
const classOptions = ref([{
  label:'测量波长',
  value:'测量波长'
}]);
const getTypeOptions = async () => {
  const res = await API.CustomerTypeOptions({});
  classOptions.value = res;
};
const zoneoList = ref([]);

const statusOptions = ref([{
  text:'在保',
  value:'在保'
}]);

const dealerList = ref();

onMounted(async () => {
  formState.value = query.value
  if (query.value.id) {
    // getData();
  }
});
const fileList = ref([]);
const handleCustomRequest = async (options) => {
  const { onSuccess, onError, file } = options;
  const formData = new FormData();
  formData.append("file", file);
  const res = await SAPI.UploadFile(formData);
  onSuccess(res);
  console.log(111, res);
  formState.value.logo = res;
};
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入客户名称",
      trigger: "blur",
    },
  ],
  class: [
    {
      required: true,
      message: "请选择客户分类",
      trigger: "change",
    },
  ],
});
const formRef = ref(null);
const handleSubmit = (values) => {
  formRef.value.validate().then(async () => {
    console.log(formState.value);
    if (query.value.id) {
      //编辑
      const res = await API.CustomerUpdate({
        ...formState.value,
        city_id: formState.value.city_id[1],
        customer_id: query.value.id,
      });
      console.log(res);
      if (res) {
        formRef.value.resetFields();
        //提示编辑成功
        message.success("编辑成功");
        //后退
        router.go(-1);
      }
    } else {
      //新增
      const res = await API.CustomerCreateCustomer({ ...formState.value, enabled: true, city_id: formState.value.city_id[1], create_time: new Date().getTime() });
      console.log(res);
      if (res) {
        formRef.value.resetFields();
        //提示新增成功
        message.success("新增成功");
        //后退
        router.go(-1);
      }
    }
  });
};
const resetForm = () => {
  formState.value = {};
  router.go(-1);
};

const getData = async () => {
  let params = {
    customer_id: query.value.id,
  };
  const res = await API.CustomerFetchModel(params);

  formState.value = res;
  let list = zoneoList.value
  formState.value.city_id = getCityId(zoneoList.value, res.city_id);
};

</script>
<style scoped>
.add-btn{
  display: flex;
  align-items: center;
  /* background-color: #F4F4F4;
  color: #3E3E3E; */
  width: 100%;
  justify-content: center;
}
</style>